<template>
  <div>
    <div class="container" :style="{backgroundImage: 'url(' + bgImgUrl + ')', backgroundSize: '100% 100%', backgroundRepeat: 'no-repeat'}">
      <div class="header">
        <div class="cityBox">
          <h1>{{weekData.city}}</h1>
          <div class="date margin-20">
            <span class="margin-right-20">{{dayData.date}}</span>
            <span>{{dayData.week}}</span>
          </div>
          <div class="airQuality">
            <span>空气质量：{{dayData.air_level}}</span>
          </div>
        </div>

        <div class="selectCity">
          <el-cascader
            size="large"
            filterable
            :options="options"
            v-model="selectedOptions"
            placeholder="请选择/搜索地区"
            @change="handleChange"
          ></el-cascader>
        </div>
      </div>

      <div class="footer">
        <div class="hourWeather">
          <ul>
            <li v-for="(item, index) in weekData.data" :key="index">
              <span>{{item.day}}</span>
              <img :src="require('@/assets/imgs/weather/' + item.wea_day_img + '.png')" class="margin-top-20">
              <span class="margin-10">{{item.wea_day}}</span>
              <span class="margin-10">{{item.tem}}℃</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {regionData, CodeToText} from 'element-china-area-data';
import {getRequest}  from '@/api/weather'

export default {
  name: 'weather',
  data() {
    return {
      options: regionData,
      selectedOptions: [],
      weekData: [],
      dayData: {},
      bgImgUrl: '',
      address: '',
      addressAll: []
    }
  },
  created () {
    this.getAWeekWeather()
  },
  methods: {
    handleChange (value) {
      this.addressAll = []
      this.address = ''
      value.forEach(city => {
        this.addressAll.push(CodeToText[city])
      });
      if (this.addressAll[2] === '市辖区' || this.addressAll.length === 2) {
        this.address = this.addressAll[1].split('').slice(0, this.address.length-1).join('')
      } else {
        this.address = this.addressAll[2].split('').slice(0, this.address.length-1).join('')
      }
      this.getAWeekWeather()
    },
    getAWeekWeather() {
      getRequest({
        appid: '37261642',
        appsecret: '0cKFbw8O',
        version: 'v91',
        city: this.address
      }).then(res => {
        this.weekData = res.data
        this.dayData = res.data.data[0]
        this.bgImgUrl = require(`@/assets/imgs/weather/${res.data.data[0].wea_day_img}.jpg`)
      })
    }
  }
}
</script>

<style >
.container {
  width: 100%;
  height: 100%;
  background-color: antiquewhite;
  position: relative;
  /* color: #fff; */
}
.header {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 20px 20px;
  box-sizing: border-box;
}
.margin-20 {
  margin: 20px 0;
}
.margin-10 {
  margin: 10px 0;
}
.margin-right-20 {
  margin-right: 20px;
}
.margin-top-20 {
  margin-top: 20px;
}
.footer {
  position: absolute;
  top: 200px;
  width: 100%;
}
.cityBox {
  background-color: rgba(255,255,255,.3);
  padding: 10px 30px;
  border-radius: 20px;
  font-weight: bold
}
.hourWeather ul {
  display: flex;
  height: 174px;
  align-items: center;
}
.hourWeather ul li {
  background-color: rgba(185, 185, 188, 0.29);
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 20px;
  box-sizing: border-box;
  height: 200px;
  margin-left: 2px;
  border-radius: 10px;
  box-sizing: border-box;
  text-align: center;
  flex: 1;
  font-weight: bold
}
.hourWeather ul li img {
  width: 50px;
  height: 40px;
}
.hourWeather ul li:first-child {
  /* width: 28%; */
  border-left: none;
  margin-left: -39px;
}
</style>
